<script setup lang="ts">
import XtxSwiper from '@/components/XtxSwiper.vue'
import CustomNavbar from './componets/CustomNavbar.vue'
import CategoryPanel from './componets/CategoryPanel.vue'
import HotPanel from './componets/HotPanel.vue'
import XtxGuess from '@/components/XtxGuess.vue'
import { ref } from 'vue'
import skeleton from './componets/skeleton.vue'
import type { XtxGuessInstance, XtxSwiperInstance } from '@/types/components'
import { computed } from 'vue'

type instanceCategoryPanelRef = InstanceType<typeof CategoryPanel> // 猜你喜欢类型
type instanceHotPanelRef = InstanceType<typeof HotPanel> // 猜你喜欢类型
const CategoryPanelRef = ref<instanceCategoryPanelRef>() // 分类
const XtxSwiperRef = ref<XtxSwiperInstance>() // 轮播图
const GuessRef = ref<XtxGuessInstance>() // 猜你喜欢
const HotPanelRef = ref<instanceHotPanelRef>() // 热门推荐

const onScrolltolower = () => {
  GuessRef?.value?.loadMore()
}

const isRefresher = ref(false) // 下拉刷新开关
// 下拉刷新
const onRefresher = async () => {
  // 更新轮播图、猜你喜欢（页码、数据）、分类、推荐
  isRefresher.value = true
  await Promise.allSettled([
    CategoryPanelRef.value?.getList(), // 分类列表
    XtxSwiperRef.value?.getList(), // 轮播图
    GuessRef.value?.reList(), // 猜你喜欢
    HotPanelRef.value?.getList(),
  ])
  isRefresher.value = false
}

// 骨架屏开关
const isSkeletonShow = computed(() => {
  return (
    GuessRef.value?.list.length &&
    XtxSwiperRef.value?.list.length &&
    HotPanelRef.value?.list?.length &&
    GuessRef.value.list.length
  )
})
</script>

<template>
  <!-- 顶部导航 -->
  <CustomNavbar></CustomNavbar>

  <skeleton v-show="!isSkeletonShow"></skeleton>
  <scroll-view
    v-show="isSkeletonShow"
    scroll-y
    class="scroll_view"
    refresher-enabled
    :refresher-triggered="isRefresher"
    @refresherrefresh="onRefresher"
    @scrolltolower="onScrolltolower"
  >
    <XtxSwiper :distributionSite="1" ref="XtxSwiperRef"></XtxSwiper>
    <CategoryPanel ref="CategoryPanelRef" />
    <HotPanel ref="HotPanelRef" />
    <XtxGuess ref="GuessRef" />
  </scroll-view>
</template>

<style lang="scss">
page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.scroll_view {
  flex: 1;
}
</style>
